<template>
    <div id="userManager">
        <el-card shadow="never" class="card">
            <!--搜索框-->
            <div class="search">
                <el-row :gutter="20">
                    <el-col :span="15">
                    </el-col>
                    <el-col :span="5">
                        <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
                    </el-col>
                </el-row>


            </div>
            <!--数据表-->
            <el-table :data="tableData" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" header-align="center" align="center" />
                <!-- <el-table-column prop="index" label="序号" width="120" align="center"> -->
                <!--计算方式((当前页-1) * 每页显示条数) + 当前的index+1-->
                <!-- <template slot-scope="scope">
                        {{((page.pageNumber - 1) * page.pageSize) + (scope.$index+1)}}
                    </template> -->
                <!-- </el-table-column> -->
                <el-table-column fixed prop="userName" label="用户名" width="150" header-align="center" align="center" />
                <el-table-column prop="nickName" label="用户昵称" width="150" header-align="center" align="center" />
                <el-table-column prop="phoneNumber" label="联系电话" width="150" header-align="center" align="center" />
                <el-table-column prop="companyName" label="企业名称" width="300" header-align="center" align="center" />
                <el-table-column prop="userType" label="用户类型" width="120" header-align="center" align="center">
                    <template slot-scope="scope">
                        {{ userType.getDesc(scope.row.userType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="用户状态" width="120" header-align="center" align="center">
                    <template slot-scope="scope">
                        {{ userstatus.getDesc(scope.row.status) }}
                    </template>
                </el-table-column>
                <el-table-column prop="loginDate" label="登录时间" width="200" header-align="center" align="center" />
                <el-table-column prop="loginIp" label="登录IP" width="150" header-align="center" align="center" />
                <el-table-column prop="createBy" label="创建人" width="150" header-align="center" align="center" />
                <el-table-column prop="createTime" label="创建时间" width="200" header-align="center" align="center" />
                <el-table-column fixed="right" label="操作" width="120" header-align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!--分页组件-->
        <page></page>
    </div>
</template>

<script>
import { queryPage } from '@/api/system/userManager/userManagerAPI';
import { userType, userstatus } from '@/enums/SystemEnums'
import Page from '@/components/Page'

export default {
    name: 'userManager',
    components: { Page},
    data() {
        return {
            tableData: [],
            userType,
            userstatus
        }
    },
    methods: {
        handleClick(row) {
            console.log(row);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        getQueryPage() {
            queryPage(this.page)
                .then(success => {
                    this.tableData = success.list;
                }).catch(error => {
                    console.log(error)
                })
        }
    },
    created() {
        this.getQueryPage();
    }

}
</script>

<style scoped lang="less">
.card {
    min-height: 80vh;
}

.search {
    margin-bottom: 10px;
}
</style>
